<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
    </title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <style>
    .Query {
        position: relative;
    }
    
    .Query:hover .popover {
        left: -100%;
        width: 100%;
        display: block;
    }
    
    #content > div {
        overflow: hidden;
        float: left;
    }
    </style>
</head>

<body>
    <div id="content"></div>
    <script type="text/javascript">
    var ENV = getEnvFromUrl();

    // Create top level components based on ENV.count
    var content = document.getElementById('content');
    for (var i = 0; i < ENV.count; i++) {
        var container = document.createElement('div');
        container.style.width = 100 / ENV.count + '%';
        container.id = 'topLevelContainer-' + i;
        content.appendChild(container);
    }

    if (ENV.worker) { // Add script tag based on worker or normal example
        addScript('main-worker.js');
    } else {
        addScript('main-normal.js');
    }


    function addScript(list) {
        var x = document.createElement('script');
        x.src = '/react-worker-dom/dist/dbmonster/' + list;
        document.body.appendChild(x);
    }

    function getEnvFromUrl() {
        var uri = window.location.hash.substring(1)
        var q = {};
        uri.replace(new RegExp("([^?=&]+)(=([^&]*))?", "g"), function($0, $1, $2, $3) {
            q[$1] = $3;
        });
        var res = {
            worker: q.worker === 'true',
            timeout: parseInt('0' + q.timeout, 10),
            rows: parseInt('0' + q.rows, 10) || 10,
            count: parseInt('0' + q.count, 10) || 1
        }
        window.location.hash = [
            'count=' + res.count,
            'timeout=' + res.timeout,
            'worker=' + res.worker,
            'rows=' + res.rows,
        ].join('&');

        return res;
    }
    </script>
</body>

</html>
